<template>
	<el-form
		ref="form"
		class="login-container"
		:inline="true"
		:model="form"
		:rules="rules"
        label-width="70px"
	>
		<h3 class="login-title">系统登录</h3>
		<el-form-item label="用户名" prop="username">
			<el-input v-model="form.username" placeholder="请输入用户名"></el-input>
		</el-form-item>
		<el-form-item label="密码" prop="password">
			<el-input
				v-model="form.password"
				placeholder="请输入密码"
				show-password
			></el-input>
		</el-form-item>
		<el-button type="primary">登录</el-button>
	</el-form>
</template>

<script>
export default {
	data() {
		return {
			form: {
				username: "",
				password: "",
			},
			rules: {
				username: [
					{ required: true, message: "请输入用户名", trigger: "blur" },
				],
				password: [{ required: true, message: "请输入密码", trigger: "blur" }],
			},
		}
	},
}
</script>
<style lang="less" scoped>
.login-container {
	width: 350px;
	border: solid 1px #eaeaea;
	margin: 100px auto;
	padding: 35px 35px 15px 35px;
	background-color: #fff;
	border-radius: 15px;
	box-shadow: 0 0 25px #cac6c6;
    box-sizing: border-box;     // 修改盒模型高度计算方式，包含内外边距
    .login-title {
        text-align: center;
        margin-bottom: 40px;
        color: #505458
    }
    .el-input {
        width: 198px;
    }
    .el-button {
        margin: 0 100px 10px 100px
    }
}
</style>
